<template>
	<div class="share_page layer">
		<van-nav-bar :title="$t('my.pricingUnit')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont">
			<van-loading style="text-align: center; padding: 20px;" v-if="loading" />
			<div class="cell_box">
				<van-radio-group v-model="radio">
					<van-cell :title="item.currency" @click="handleItem(item)" v-for="(item,index) in list">
						<template #right-icon>
							<van-radio :name="item.currency" />
						</template>
					</van-cell>
				</van-radio-group>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		commonCurrencylist
	} from '@/api/my'
	export default {
		components: {},
		data() {
			return {
				loading: false,
				radio: 'USD',
				list: [],
			}
		},
		computed: {},
		watch: {},
		mounted() {
			let unit = localStorage.getItem('unit')
			if (unit) {
				this.radio = unit
			}
			this.getList()
		},
		methods: {
			async getList() {
				this.loading = true
				const res = await commonCurrencylist().catch(err => this.loading = false)
				if (res && res.code == 1) {
					this.list = res.data
				} else {
					this.$toast.fail(res.msg)
				}
				this.loading = false
			},
			handleItem(item) {
				// console.log('item', item);
				this.radio = item.currency
				localStorage.setItem('unit', this.radio)
				this.$store.dispatch('getUserInfo')
			}
		}
	}
</script>

<style scoped lang="less">
	.share_page {
		.cont {
			padding: 10px 0;

			.cell_box {
				background-color: #3D3D3D;
				border-radius: 16px;
				overflow: hidden;
				margin-bottom: 20px;

				.van-cell {
					background-color: #3D3D3D;
					padding: 13px 20px;
					align-items: flex-end;

					::v-deep .van-cell__title {
						text-align: left;
						color: #fff;
					}

					::v-deep .van-cell__right-icon {
						color: #fff;
					}

					::v-deep .van-radio__icon--checked .van-icon {
						color: #333;
						background-color: #0DF5E3;
						border-color: transparent;
					}

					::v-deep .van-radio__icon .van-icon {
						border: 0;
					}
				}
			}
		}
	}
</style>